<template>
	<div>
		<el-collapse v-model="activeNames" @change="handleCollapseChange">
			<el-collapse-item :name="item.id" v-for="(item, index) in items" :key="item.id">
				<template slot="title">
					<div class="flex" style="margin-top: 8px;">
						<div style="margin-left: 10px;margin-top: 5px;">
							<el-time-picker style="width: 200px;" is-range v-model="item.content.timeRange"
								range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
								value-format="HH:mm:ss">
							</el-time-picker>
						</div>
						<div style="margin-left: 20px;margin-top: 8px;"><audio v-if="item.content.audioSrc" controls
								style="height:40px;" :src="item.content.audioSrc"></audio></div>
					</div>
				</template>

				<div class="station-function">
					<el-table :data="item.content.pltTaskItemRecords" class="zt-table" :empty-text="'暂无数据'">
						<el-table-column show-overflow-tooltip label="时间" align="center" prop="createTime">
							<template slot-scope="{row}">
								{{ toSimpleDateTime(row.createTime) }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip label="电台" align="center" prop="radioStationCode" />
						<el-table-column show-overflow-tooltip label="通道" align="center" prop="channel" />
						<el-table-column show-overflow-tooltip label="状态" align="center" prop="status">
							<template slot-scope="{row}">
								{{ getStatus(row.status) }}
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip label="内容" align="center" prop="waveUrl">
							<template slot-scope="{row}">
								<a :href="row.waveUrl">下载</a>
							</template>
						</el-table-column>
					</el-table>
					<!-- <div class="station-li" style="margin-top: 10px;">
						<div class="flex">
							<div class="gray" style="padding-left: 60px;">时间</div>
							<div class="gray" style="padding-left: 70px;">电台</div>
							<div class="gray" style="padding-left: 30px;">通道</div>
							<div class="gray" style="padding-left: 100px;">内容</div>
						</div>
						<div class="flex" v-for="(receive, idx) in item.content.pltTaskItemRecords"
							:key="receive.taskItemRecordId">
							<div style="padding-left: 5px;">{{ toSimpleDateTime(receive.createTime) }}</div>
							<div style="margin-left: 20px;">{{ receive.radioStationCode }}</div>
							<div style="margin-left: 40px;">{{ receive.channel }}</div>
							<div style="margin-left: 50px;">
								<audio v-if="receive.waveUrl" controls style="height:30px;"
									:src="receive.waveUrl"></audio>
								<div v-if="receive.data">{{ receive.data }}</div>
							</div>
						</div>
					</div> -->

				</div>

			</el-collapse-item>
		</el-collapse>

	</div>
</template>

<script>
export default {
	props: {
		arr: {
			type: Array,
		}
	},
	data() {
		return {
			activeNames: [], // 用于控制折叠项的展开与折叠
			items: [],
			nextId: 0, // 用于生成新折叠项的 id
			dataTypes: [
				{ "label": "语音", "value": 1 },
				{ "label": "文本", "value": 2 },
			]
		};
	},
	created() {
		this.loadItems(this.arr);
	},
	watch: {
		items: {
			handler(newList) {
				//todo 输入检查
				let itemList = [];
				for (var i = 0; i < newList.length; i++) {
					if (newList[i].content.timeRange) {
						newList[i].content.begin = newList[i].content.timeRange[0];
						newList[i].content.end = newList[i].content.timeRange[1];
					}
					itemList.push(newList[i].content);
				}
				this.$emit("setItemList", itemList);
			},
			deep: true
		}
	},
	methods: {
		getStatus(status) {
			status *= 1;
			switch (status) {
				case 1:
					return '接收';
				case 2:
					return '完成'
				case 3:
					return '异常'
				default:
					return ''
			}
		},
		loadItems(newArr) {
			if (null == newArr) {
				return;
			}

			let localArr = JSON.parse(JSON.stringify(newArr))
			for (var i = 0; i < localArr.length; i++) {
				localArr[i].timeRange = [localArr[i].begin, localArr[i].end]
				if (null != localArr[i].waveUrl) {
					localArr[i].dataType = 1;
					localArr[i].audioSrc = localArr[i].waveUrl;
				} else {
					localArr[i].dataType = 2;
				}
				this.items.push({ id: this.nextId, content: localArr[i] });
				this.nextId++;
			}
		},
		handleCollapseChange(activeNames) {
			this.activeNames = activeNames;
		},
		dataTypeChange(id) {
			this.items.forEach(item => {
				if (item.id == id) {
					if (item.content.dataType == 1) {
						item.content.audioSrc = null;
						item.content.dataBase64 = null;
					} else {
						item.content.data = null;
					}
				}
			});
		},
		toSimpleDateTime(s) {
			if (!s) return '';
			// 使用正则表达式替换字符
			return s.replace(/-/g, '') // 将'-'替换为''
				.replace(/ /g, '') // 将空格替换为''
				.replace(/:/g, ''); // 将':'替换为''
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.add-item-bt {
	width: 146px;
	height: 48px;
	background-color: #46E5CB;
	border-radius: 42px 42px 42px 42px;
	margin-left: 500px;
	margin-top: 5px;
	border: none;
}

.el-collapse {
	border: none;
}

.el-collapse-item {
	background: #070C1A;
}

.el-collapse-item ::v-deep.el-collapse-item__header {
	background: none;
	border: none;
	border-radius: 50px;
	color: white;
	position: relative;
}

.el-range-editor.el-input__inner {
	background: #394760;
	border: none;
	border-radius: 50px;
	color: white;
}

.el-collapse-item ::v-deep.el-collapse-item__arrow {
	margin: 0 50px 0 auto;
}

.el-range-editor--medium ::v-deep.el-range-input {
	background: #394760;
	border: none;
	color: white;
}

.el-date-editor ::v-deep.el-range-separator {
	color: white;
}

.el-collapse-item ::v-deep.el-collapse-item__wrap {
	background: #070C1A;
	border: none;
}

.el-collapse-item {
	margin-bottom: 1px;
}

.unit {
	font-size: 14px;
	color: #9A9DAA;
	position: absolute;
	left: 111px;
	white-space: nowrap;
}

.flex {
	.el-form-item {
		flex: 1;
		position: relative;
	}
}
</style>